{% extends "base.html" %}
{% block content %}
<main>
    <section class="container my-5 px-4">
      <h1 class="text-center"><span style="color:red">Ya</span>Cut</h1>
      <p class="text-center my-4">
        Создайте короткую ссылку автоматически или предложите свой вариант
      </p>

      <div class="container">
        <div class="row my-3">
          <div class="col-sm">
          </div>
          <div class="col-sm">
            <form method="POST" novalidate>
              <div>
                <div>
                  {{ form.csrf_token }}
                  {{ form.original_link(class="form-control form-control-lg py-2 mb-3", placeholder=form.original_link.label.text, id="form-title") }}
                  <p>
                    {% if form.original_link.errors %}
                      {% for error in form.original_link.errors %}
                        <span style="color: red">{{ error }}</span>
                      {% endfor %}
                    {% endif %}
                  </p>
                </div>
                <div>
                  {{ form.custom_id(class="form-control form-control-lg py-2 mb-3", placeholder=form.custom_id.label.text, id="form-link") }}
                  <p>
                    {% if form.custom_id.errors %}
                      {% for error in form.custom_id.errors %}
                        <span style="color: red">{{ error }}</span>
                      {% endfor %}
                    {% endif %}
                  </p>
                </div>
                <div class="text-center">
                {{ form.submit(class="btn btn-primary") }}
                </div>
              </div>
            </form>
          </div>
          <div class="col-sm">
          </div>
        </div>
      </div>

      <div class="container">
        <div class="row ">
          <div class="col-sm">
          </div>
          <div class="col-sm">
            <p class="text-center">
            <h5 class="text-center">
              {% with messages = get_flashed_messages() %}
                {% if messages %}
                  {% for message in messages %}
                    {{ message }}
                  {% endfor %}
                {% endif %}
              {% endwith %}
              {% if short %}
                <p>созданная ссылка.'</p>
                <span><a href="{{ short }}" target="_blank">{{ short }}</a></span>
              {% endif %}
            </h5>
            </p>
          </div>

        </div>
      </div>

    </section>
  </main>
{% endblock %}